<%--
  Created by IntelliJ IDEA.
  User: DongZhengWei
  Date: 2018/12/4
  Time: 8:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<div id="page-content">
	<div class="fixed-fluid">

		<!-- 左 -->
		<div class="fixed-sm-200 fixed-md-250 pull-sm-left">
			<div class="panel">
				<div class="pad-all bord-btm">
					<a id="add_dict_btn" href="javascript:void(0)" class="btn btn-block btn-success">新增字典</a>
				</div>
				<p class="pad-hor mar-top text-main text-bold">字典列表</p>
				<div id="dict-list-container" class="list-group bg-trans pad-btm bord-btm">

					<c:forEach items="${dictList}" var="dict" varStatus="index">
						<a id="${dict.id}" href="javascript:void(0)" class="list-group-item text-semibold <c:if test="${index.first}">active</c:if>">
							<span class="badge badge-success pull-right text-main">${fn:length(dict.dictItems)}</span>
							<i class="ti-package icon-lg icon-fw"></i>
							<span class="dict_name_span">${dict.name}</span>
						</a>
					</c:forEach>

				</div>
			</div>
		</div>

		<!-- 又 -->
		<div class="fluid">
			<div class="panel">
				<div class="panel-body">
					<table id="dict_item_table" cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered"></table>
				</div>
			</div>
		</div>

	</div>
</div>

<script>
	$(function(){
	    init_table_dict_item();
	});

	function init_table_dict_item(){
        var firstItemId = $("#dict-list-container a:first").attr("id");
		var columns = [
			{targets : 0, data : "id", title : "id", visible : false, orderable : false, searchable : false},
			{targets : 1, data : "name", title : "字典项名称", visible : true, orderable : true, searchable : true},
			{targets : 2, data : "value", title : "关键字", visible : true, orderable : false, searchable : false},
			{targets : 3, data : "attrJson", title : "附加属性", visible : true, orderable : false, searchable : false},
            {targets : 4, title : "操作", visible : true, orderable : false, searchable : false, render : actBtnRender}
		];
		var buttons = [
            {text : "<i class=\"ti-pencil-alt\"></i>", className : "btn btn-default mar-rgt", enable : true, action : edit_dict},
			{text : "添加字典项", className : "btn btn-success", enabled : true, action : add_dict_item}
		];
        __init_dataTables("dict_item_table", "<%=path%>/main/dictItem/list?dictId="+firstItemId, columns, buttons, false, {
            paging : false
        });
	}

	function actBtnRender(data, type, row, meta){
        var id = row.id;
        return '<a href="javascript:void(0);" class="label label-table label-info" onclick="fn_dict_item_edit(\'' + id + '\')">编辑</a>';
	}

	//添加系统字典
	$("#add_dict_btn").on("click", function(){
	    __open_dialog_form("添加新系统字典", "<%=path%>/main/dict/dict_input_dialog", function(dialogRef){
	        var callback = function(data){
	            if(data && data.state === 1){
	                dialogRef.close();
	                var id = data.data.id;
	                var newDictItem = '<a id="'+id+'" href="javascript:void(0)" class="list-group-item text-semibold">\n' +
                        '<span class="text-main"><span class="badge badge-success pull-right">0</span></span>\n' +
                        '<i class="ti-package icon-lg icon-fw"></i> '+data.data.name+'\n' +
                        '</a>';
	                //TODO 修改这里的【span】排版
	                $("#dict-list-container").append(newDictItem);
	            }else{
	                dialogRef.enableButtons();
	            }
	        };
	        fn_dict_dialog_save(callback);
	    })
	});

	//编辑系统字典
	function edit_dict(e,dt,node,config){

	}

	//增加字典项
	function add_dict_item(e,dt,node,config){
	    __toastr_primary(e);
	    __toastr_primary(dt);
	    __toastr_primary(node);
	}

	//编辑字典项
	function fn_dict_item_edit(dictItemId){
	    __toastr_primary(dictItemId)
	}

	//左侧列表点击切换字典
	$("#dict-list-container").on("click", "a", function(){
	    var actId = $("#dict-list-container>a.active").attr("id");
	    var id = $(this).attr("id");
	    if(id && actId !== id){
            $("#dict_item_table").DataTable().ajax.url("<%=path%>/main/dictItem/list?dictId="+id).load(function(data){
                if(data){
                    $("#dict-list-container a").removeClass("active");
                    $("#dict-list-container #" + id).addClass("active");
                }
            }, true);
	    }

	})

</script>